23. 性能优化方法
前端性能优化通常按 网络层 → 资源加载 → 渲染 → 缓存 → 框架层 五个阶段依次推进，下面按阶段整理了常用方法及说明，方便速查。
性能优化实战方法（按阶段分类）
阶段一：网络层优化（减少请求 + 加速传输）
| 方法 | 说明 |
|---|
| CDN 加速 | 静态资源分发到离用户最近的节点 |
| HTTP/2 / HTTP/3 | 多路复用、头部压缩，减少连接开销 |
| Gzip / Brotli 压缩 | 减少传输体积（Brotli 比 Gzip 压缩率更高） |
| 减少 HTTP 请求 | 合并小文件（但不建议过度合并，HTTP/2 下可适度拆分） |
| 预加载（Preload） | <link rel="preload" href="font.woff2" as="font"> 提前下载关键资源 |
| 预连接（Preconnect） | <link rel="preconnect" href="https://api.example.com"> 提前建立连接 |
| DNS 预解析 | <link rel="dns-prefetch" href="//cdn.example.com"> |
阶段二：资源加载优化（更智能的加载策略）
| 方法 | 说明 |
|---|
| 代码分割（Code Splitting） | 按路由/组件拆分 JS，只加载当前需要的代码（Webpack import() / Vite 自动） |
| 懒加载（Lazy Load） | 图片、组件、路由等，滚动到可视区再加载 |
| Tree Shaking | 移除未使用的代码（ES Module 静态分析） |
| 异步加载 JS | <script async>（下载完即执行）和 <script defer>（DOM 解析完再执行） |
| 关键 CSS 内联 | 首屏所需 CSS 直接内联在 HTML 中，避免额外的请求阻塞渲染 |
| 非关键 CSS 延迟加载 | 用 media="print" 或 JS 动态注入 |
阶段三：渲染优化（让页面更流畅）
| 方法 | 说明 |
|---|
| 减少 Reflow / Repaint | 避免频繁读写 DOM 布局属性（offsetTop、scrollTop 等）；用 requestAnimationFrame 批量更新 |
| 使用 transform 和 opacity 做动画 | 这两个属性由 GPU 加速，不触发 Reflow |
| 虚拟滚动（Virtual Scroll） | 长列表只渲染可视区域（如 vue-virtual-scroller、react-window） |
| 使用 will-change | 提前告知浏览器哪些属性会变化，但不要滥用（会占用 GPU 内存） |
| 减少 DOM 节点数量 | 更少的节点 = 更快的 diff 和渲染 |
使用 content-visibility: auto | 离屏元素跳过渲染，优化长页面首次加载性能 |
阶段四：缓存优化（减少重复加载）
| 方法 | 说明 |
|---|
| HTTP 强缓存 + 协商缓存 | Cache-Control + ETag 策略（详见上一轮回答） |
| Service Worker | 离线缓存，拦截请求，实现 PWA 和秒开 |
| 本地存储缓存 | localStorage 缓存接口数据，减少重复请求 |
| CDN 缓存策略 | 合理设置 CDN 刷新规则 |
阶段五：框架层面优化（Vue / React 专属）
| 框架 | 优化方法 |
|---|
| Vue | 用 v-once 渲染静态内容；v-memo 缓存模板片段；keep-alive 缓存组件；shallowRef / shallowReactive 减少深度响应式开销 |
| React | React.memo 避免不必要的重渲染；useMemo / useCallback 缓存值和函数；Suspense + 异步组件实现按需加载 |
| 通用 | 路由懒加载；组件库按需引入（unplugin-vue-components / babel-plugin-import）；避免大型第三方库（如用 dayjs 代替 moment） |